<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-21 09:55:08
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2023-12-26 17:21:54
 * @FilePath: \smart-community\src\components\BussComponents\HappyWork.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <BoxTitleInLeft title="舒心就业">
    <template #body>
      <div class="work_content">
        <div class="qr_code">
          <img src="../../assets/images/舒心就业服务平台.png" alt="" />
          <span>舒心就业服务平台</span>
        </div>
        <div class="qr_code">
          <img src="../../assets/images/人才政策.png" alt="" />
          <span>人才政策</span>
        </div>
        <div class="video">
          <video src="../../assets/images/1.mp4" controls></video>
          <span>就业培训</span>
        </div>
      </div>
    </template>
  </BoxTitleInLeft>
</template>

<script setup>
import chartData from "@/config/chartOption.js";
import BoxTitleInLeft from "@/components/BoxTitleInLeft/index.vue"
</script>

<style lang="scss" scoped>
.work_content {
  height: 100%;
  @include display(flex-start, center, row);
  & > div {
    background: rgba(0, 120, 146, 0.5);
    padding: 20px;
    box-sizing: border-box;
    @include display(flex-start, center, column);

    img {
      width: 100%;
    }
    span {
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Light;
      font-weight: bold;
      color: #ffffff;
      margin-top: 20px;
    }
  }
  .qr_code {
    width: 349px;
    // 设置宽高比
    aspect-ratio: 349/402;
    height: auto;
  }
  .qr_code:nth-of-type(1) {
    margin: 0 40px 0 70px;
  }
  .video {
    width: 700px;
    aspect-ratio: 700/402;
    height: auto;
    margin-left: 40px;
    video {
      width: 100%;
      aspect-ratio: 896/400;
      height: auto;
    }
  }
}
</style>
